<template>
    <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog">
        <div class="detail">
            <div class="title">{{ article.title }}</div>
            <div class="sub-title">{{ article.publishDate }}</div>

            <div class="content" v-html="article.content"></div>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <!-- <el-button @click="cancel()">取消</el-button> -->
                <el-button type="primary" @click="closeDialog()">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { ref } from "vue";
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm, ElMessageBox } from "element-plus";

export default {
    name: "AddBaseStudent",
    components: { ElForm, ElMessage, ElMessageBox },
    data() {
        return {
            dialogFormVisible: ref(false),
            formLabelWidth: "120px",
            title: "",
            personnelType: "",
            article: {}
        };
    },
    methods: {
        closeDialog() {
            this.dialogFormVisible = false
            // this.clear();
        },
        queryNotice(id) {
            alert(123)
            httpService(
                "/javaApi/messages/queryById",
                { id: id },
                "get"
            ).then((data) => {
                this.article = data;
            });
        },

        readhandle(id) {
            alert(id)
            let params = new FormData()
            params.append('messageId', id)
            httpService(
                "/javaApi/messageViews/add", params, "post"
            ).then((data) => {
                console.log(9999, data);
            });
        },
    },
};
</script>
<style>
.el-select {
    width: 100%;
}

.el-dialog__header {
    padding: var(--el-dialog-padding-primary);
    padding-bottom: 10px;
    border-bottom: 1px solid #dedede;
    margin-bottom: 10px;
}

.detail .title {
    font-size: 20px;
}

.detail td {
    border: 1px solid #dedede;
}

.detail table {
    text-align: center;
    margin: 0 auto;
}

.detail .sub-title {
    font-size: 16px;
    padding: 10px;
    color: #888888;
}

.detail {
    min-height: calc(100vh - 370px);
    text-align: center;
}

.content {
    width: 70%;
    margin: 0 auto;
    text-align: left;
}

.content img {
    width: 100%;
    height: auto;
}
</style>